<template>
  <li class="big-page">
    <div class="article-card">
      <div class="team-title">
        <div class="title-top">
          <img :src="child.resource.author.userinfo.avatar" alt="" />
          <span>{{child.resource.author.userinfo.username}}</span>
          <span
            >和其他<span>{{child.resource.team_user_count}}</span>人</span
          >
        </div>

        <p>+关注<i class="iconfont icon-diandian"></i></p>
      </div>
      <div class="main-title">{{child.resource.title}}</div>
      <div class="main-img">
        <div class="video-img" ref="videoImg">
          <img v-if="!show" :src="`${child.resource.cover}?x-oss-process=image/resize,m_mfit,h_405,w_720`" />

          <video v-if="show" :src="videos.url" width="100%" autoplay muted ref="video"></video>
        </div>

        <div class="look">
          <span>{{ getPlay(child.resource.count.count_view) }}w观看</span>|
          <span>{{ getPlayTime(child.resource.duration) }}'{{ getPlaySecond(child.resource.duration) }}'</span>
        </div>
      </div>
      <div class="team-down">
        <span><i class="iconfont icon-shoucang"></i>{{ getPlayLook(child.resource.count.count_collect) }}</span>
        <span><i class="iconfont icon-pinglun"></i>{{getPlayLook(child.resource.count.count_comment)}}</span>
        <span><i class="iconfont icon-dianzan"></i>{{ getPlayLook(child.resource.count.count_like) }}</span>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  data: function () {
    return {
        videos:null,
        show:false,
    };
  },
  props: ["child"],
  components: {},
    created: function () {
    
        this.axios
        .get(
          "https://apis.netstart.cn/xpc/article/" +
            this.child.resource.id
        )
        .then((res) => {

          this.videos = res.data.data.video.content.progressive;
          this.videos = this.videos[this.videos.length - 1];
          console.log(this.videos);

        });

      
    //    window.addEventListener("scroll", this.scrollHeight);

    },
  // //   computed:{
  //     getVideoIds(){
  //     return  this.children.children[0].model.resource.id
  //     }
  //   },
  //   watch:{
  //     getVideoIds(n){
  //         this.axios
  //       .get(
  //         "https://apis.netstart.cn/xpc/article/" +
  //          n
  //       )
  //       .then((res) => {
  //         // console.log(res.data.data.video.content.progressive);
  //         this.videos = res.data.data.video.content.progressive;
  //         this.videos = this.videos[this.videos.length - 1];
  //         // console.log(this.videos);
  //       });
  //     }
  //   },
  // beforeRouteUpdate(to,from,next){
  //   console.log(123);
  //       this.axios
  //     .get(
  //       "https://apis.netstart.cn/xpc/article/" +
  //         this.children.children[0].model.resource.id
  //     )
  //     .then((res) => {
  //       // console.log(res.data.data.video.content.progressive);
  //       this.videos = res.data.data.video.content.progressive;
  //       this.videos = this.videos[this.videos.length - 1];
  //       // console.log(this.videos);
  //     });

  //     next()

  // },
  //   destroyed() {
  //      window.removeEventListener("scroll", this.scrollHeight);
  //  },

  //   beforeUpdate:function(){
  //  window.addEventListener("scroll", this.scrollHeight);
  //   },
  // watch:{
  //   getScroll:function(){

  //   }
  // },
  methods: {
    getPlay: function (value) {
        if (value > 10000) {
        return (value / 10000).toFixed(2) ;
      } else {
        return value;
      }
    },
       getPlayLook: function (value) {
        if (value > 10000) {
        return (value / 10000).toFixed(2) +"w";
      } else {
        return value;
      }
    },
    getPlayTime: function (times) {
       if(times / 60<10){
            return "0"+ parseInt(times / 60)
        }else{
            return parseInt(times/60)
        }
    },
    getPlaySecond: function (times) {
       if(times % 60<10){
            return "0"+ parseInt(times % 60);
        }else{
            return  parseInt(times % 60);
        }
    },

    // scrollHeight: function () {

    // if(this.children.children[0].type=='mArticle'){
    // this.$nextTick(() => {
    //     if (this.$refs.videoImg) {
    //       var videoH = this.$refs.videoImg[0].getBoundingClientRect().top;
    //       var winH = window.innerHeight / 2;
    //       if (videoH < winH && videoH > 0) {
    //         this.show = true;

    //         // if(this.children.children[0].model.resource.id){

    //         // }else{
    //         //
    //         // }
    //       } else {
    //         this.show = false;
    //       }
    //     }
    //   });
    // }

    // },
    // getVideoId(child) {
    //   console.log(child.model.resource.id);
    //   // this.$router.push({ path: "/home/classify" });
    //   this.$router.push({ path: "/classify",query:{id:child.model.resource.id} })
    //   this.$store.commit("getIdVideo",{id:child.model.resource.id})
    // },
    // getUserId(child){
    //   console.log("user",child.model.resource.user_id);
    //     this.$router.push({ path: "/user",query:{id:child.model.resource.user_id} })
    //   this.$store.commit("getIdVideo",{id:child.model.resource.user_id})
    // }
  },
};
</script>

<style lang="less" scoped>
.big-page {
  width: 100%;
  background: white;
  border-radius: 10px;

  list-style: none;

  .article-card {
    margin: 10px;
    .team-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      .title-top {
        display: flex;
        align-items: center;
       
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        span {
          font-size: 12px;
          margin: 5px;
          span {
            font-weight: 700;
          }
        }
      }
      p {
        color: sandybrown;
        font-size: 12px;
        font-weight: 800;
        i {
          font-size: 10px;
          color: #999;
          margin: 0 10px;
        }
      }
    }

    .main-title {
      font-size: 14px;
      font-weight: 600;
  
    }
    .main-img {
      width: 100%;
  
      position: relative;
      .video-img {
        // height: 200px;
        img {
          width: 100%;
        }
        video {
          height: 100%;
        }
      }

      .look {
        position: absolute;
        right: 0px;
        bottom: 0px;
        color: white;
        margin: 10px;
        font-size: 13px;
      }
    }
    .team-down {
      display: flex;
      justify-content: space-around;
      margin: 10px;
      align-items: center;
      span {
        color: #666;
        i {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>